<template>
    <div class="category" id="category">
        <div class="scroll-content">
            <div class="row">
                <div
                    class="category_item"
                    v-for="(item, index) of topList"
                    :key="index"
                >
                    <van-image
                        class="icon-img"
                        fit="contain"
                        :src="item.icon"
                    />
                    <p>{{ item.name }}</p>
                </div>
            </div>

            <div class="row">
                <div
                    class="category_item"
                    v-for="(item, index) of bottomList"
                    :key="index"
                >
                    <van-image
                        class="icon-img"
                        fit="contain"
                        :src="item.icon"
                    />
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="dot-wrapper">
        <div class="dot" :style="{ transform: `translateX(${rate})` }" />
    </div>
</template>

<script lang="ts">
import {
    defineComponent,
    onMounted,
    computed,
    nextTick,
    watch,
    ref,
} from "vue";
import BScroll from "@better-scroll/core";
export default defineComponent({
    props: ["list"],
    setup(props) {
        const topList = computed(() => props.list.slice(0, 6));
        const bottomList = computed(() => props.list.slice(6));
        const rate = ref<string>("0");
        watch(
            () => props.list,
            () => {
                nextTick(() => {
                    let bs = new BScroll("#category", {
                        scrollX: true,
                        scrollY: true,
                        click: true,
                        probeType: 3,
                    });
                    const totalX = Math.abs(bs.maxScrollX);

                    bs.on("scroll", (pos: { x: number }) => {
                        const currentX = Math.abs(pos.x);
                        rate.value =
                            Number((currentX / totalX) * 100).toFixed(2) + "%";
                    });
                });
            }
        );
        return { topList, bottomList, rate };
    },
});
</script>

<style lang="scss" scoped>
.category {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    .scroll-content {
        display: inline-block;
    }
    &_item {
        display: inline-block;
        width: 20vw;
        // height: 70px;
        padding: 10px 13px;
        font-size: 12px;
        color: #333;
        text-align: center;
    }
    .icon-img {
        width: 35px;
        height: 35px;
        margin-bottom: 5px;
    }
}

.dot-wrapper {
    width: 15%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
    .dot {
        box-sizing: border-box;
        width: 50%;
        height: 2px;
        transition: all 0.4s linear;
        background: red;
    }
}
</style>
